<template>
	<view class="mainCon">
		<view class="tabHead" >
			<view class="tabItem" :class="current==index?'active':''" v-for="(item,index) in tabList"
				@click="tapChange(index)">
				{{item}}
			</view>
		</view>
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="dateLabel">
							被访人单位 : {{ item.bfr_company }}
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							被访人部门 : {{ item.bfr_department }}
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelName">
							被访人姓名 : 
						</view>
						<view class="infoCon">
							{{ item.bfr_name == null || item.bfr_name == undefined ? ' ' : item.bfr_name }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							被访人电话 : 
						</view>
						<view class="infoCon">
							{{item.bfr_tel == null || item.bfr_tel == undefined ? ' ' : item.bfr_tel }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							访问时间 : 
						</view>
						<view class="infoCon">
							<!-- {{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }} -->
							{{ item.access_tim }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							访问人姓名 : 
						</view>
						<view class="infoCon">
							{{ item.fr_name == null || item.fr_name == undefined ? ' ' : item.fr_name }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							访问人电话 : 
						</view>
						<view class="infoCon">
							{{ item.fr_tel == null || item.fr_tel == undefined ? ' ' : item.fr_tel }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							访问人单位 : 
						</view>
						<view class="infoCon">
							{{ item.fr_company == null || item.fr_company == undefined ? ' ' : item.fr_company }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							访问人车号 : 
						</view>
						<view class="infoCon">
							{{ item.carcode == null || item.carcode == undefined ? ' ' : item.carcode }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							预约事由 : 
						</view>
						<view class="infoCon">
							{{ item.access_resaon == null || item.access_resaon == undefined ? ' ' : item.access_resaon }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							预约备注 : 
						</view>
						<view class="infoCon">
							{{ item.access_memo == null || item.access_memo == undefined ? ' ' : item.access_memo }}
						</view>
					</view>
					<view class="infoCell" v-if="current == 1 || current == 2">
						<view class="labelName">
							通过/拒绝理由 : 
						</view>
						<view class="infoCon">
							{{ item.spbz == null || item.spbz == undefined ? ' ' : item.spbz }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							审核状态 : 
						</view>
						<view class="infoCon">
							{{ item.status }}
						</view>
					</view>

				</view>
			</view>
		</view>

		<view style="margin-top: 200rpx;" v-if="orderList.length ===0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ["待审核", "已通过", "已回绝"],
				current: 0, 
				orderList: [],
				tel: "",
				flag: false,
			};
		},
		onLoad() {
			//uni.getStorageSync("userInfo").mobile
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getState1()
		},
		methods: {
			tapChange(index) {
				this.current = index
				if (index == 0) {
					this.getState1()
				} 
				if (index == 1) {
					this.getState2()
				}
				if (index == 2) {
					this.getState3()
				}
			},
			getState1() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/cygjapi/zlzg/Q/ZVeLNA2Sc7ddP79?status=1&tel=' + this.tel,
					method: "get",
					success: (res) => {
						console.log(res.data)
						this.orderList = res.data.rows
						this.orderList.map(item => {
							if ( item.status == 1 ) {
								item.status = '待审核'
							} 
							if ( item.status == 2 || item.status == 3 ) {
								item.status = '审核通过'
							}
							if ( item.status == 4 ) {
								item.status = '回绝'
							}
							return item
						})
						uni.hideLoading()
					}
				})
			},
			getState2() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/cygjapi/zlzg/Q/ZVeLNA2Sc7ddP79?status=3&tel=' + this.tel,
					method: "get",
					success: (res) => {
						uni.hideLoading()
						console.log(res.data)
						this.orderList = res.data.rows
						this.orderList.map(item => {
							if ( item.status == 1 ) {
								item.status = '待审核'
							} 
							if ( item.status == 2 || item.status == 3 ) {
								item.status = '审核通过'
							}
							if ( item.status == 4 ) {
								item.status = '回绝'
							}
							return item
						})
					}
				})
			},
			getState3() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/cygjapi/zlzg/Q/ZVeLNA2Sc7ddP79?status=4&tel=' + this.tel,
					method: "get",
					success: (res) => {
						uni.hideLoading()
						console.log(res.data)
						this.orderList = res.data.rows
						this.orderList.map(item => {
							if ( item.status == 1 ) {
								item.status = '待审核'
							} 
							if ( item.status == 2 || item.status == 3 ) {
								item.status = '审核通过'
							}
							if ( item.status == 4 ) {
								item.status = '回绝'
							}
							return item
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}

	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			// background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;
			margin-top: 100rpx;
			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #858585;
							font-size: 28rpx;
							margin-right: 50rpx;
							width: 195rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
